<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>音频播放器</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0,viewport-fit=cover">
	<link rel="stylesheet" type="text/css" href="https://zt.howbuy.com/subject/css/wap_reset2017.css" />
    <link rel="stylesheet" href="css/audio_player.css">
    <link rel="stylesheet" href="css/swiper.min.css">
	<script src="https://mzt.howbuy.com/subject/js/flexible.js"></script>    
</head>
<body>
	<div class="box_radio">
		<div class="audio_box">
			<div class="book_title">
				<div class="audio_title"> </div>
			</div>
			<!--音乐图片-->
			<div class="cover"></div>
			<div class="music-nav">
				<!--进度条-->
				<div class="audio_progress">
					<span class="audio_line"></span>
					<span class="audio_blue"></span>
					<span class="audio_dot"></span>
					<input type="range" min="0" max="0" step="0.4" value="0" id="scale" >
				</div>
				<div class="audio_time flex">
					<!--当前时间-->
					<div class="time" id="time_cur"> </div>                   
					<!--歌曲时长-->
					<div class="time" id="time_long"></div>
				</div>
			</div>
			<!--音乐控制面板-->
			<div class="audio_btn">
				<div class="btn_prev"></div>                    
				<!--碟片-->
				<div id="play"></div>
				<!--暂停/播放按钮-->
				<div class="btn_play btn_pause"></div>
				<div class="btn_next"></div>                   
			</div>   
			<audio id="music" preload="auto" src="" >
				您的浏览器不支持!
			</audio>
		</div>
	</div>
    <div class="audio_content">
    	<ul class="audio_tab flex">
    		<li class="flex-1 current"><p>音频内容</p></li>
    		<li class="flex-1"><p>节目列表<span id="audioListTotal"></span></p></li>
    	</ul>
    	<div class="audio_con_box flex">
			<div class="audio_con">
				<div id="audioText"></div>
			</div>
			<div class="audio_con">
				<ul class="song_list"></ul>
				<div class="more"><a href="">点击打开app查看更多</a></div>
			</div>
    	</div>
    </div>
    <!-- 相关产品 -->
    <section class="aboutPro mt02r">
        <h3 class="title">相关产品 <a href="#">明星汇集，畅想资本盛宴</a></h3>
        <div class="swiper-container swiperBestSel">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="#">
                        <div class="labelPic"></div>
                        <h4>新方程启辰跟投独角兽2期</h4>
                        <div class="label"><span>黄金资源</span><span>极度稀缺</span></div>
                        <p>投资于规模10亿美元起，且仍告诉增长的独角兽企业</p>
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#">
                        <div class="labelPic"></div>
                        <h4>新方程启辰跟投独角兽3期</h4>
                        <div class="label"><span>黄金资源</span><span>极度稀缺</span></div>
                        <p>投资于规模10亿美元起，且仍告诉增长的独角兽企业</p>
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#">
                        <div class="labelPic"></div>
                        <h4>新方程启辰跟投独角兽4期</h4>
                        <div class="label"><span>黄金资源</span><span>极度稀缺</span></div>
                        <p>投资于规模10亿美元起，且仍告诉增长的独角兽企业</p>
                    </a>
                </div>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </section>

	
    <script src="https://mzt.howbuy.com/subject/js/zepto.min.js"></script>
    <script src="js/swiper.jquery.min.js"></script>
    <!--音频播放器-->
    <script src="js/audio_player.js"></script>
</body>
</html>